<template>
  <div id="app" style="overflow:hidden;" >
    <div style="padding:0 40px;background:black;">
      <div style="color:white;height:36px;line-height:36px;font-size:12px;">
        <p>
          免费送货：每一个笔订单，我们都将为您免费配送
        </p>
      </div>
    </div>
    <div class="center" style="padding:0 40px;">
      <div class="header" style="height:68px;line-height:68px;display:flex;">
        <div>
          <img style="max-height: 44px;width: 112px;padding:10px 0;" src="https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS9iYzg4ZmFiY2Y3NDc5ZTVlMGVhMDE2NjA3MGYzZTY3OC05MC53ZWJw.webp" alt="">
        </div>
        <div class="nav" style="flex:1;vertical-align:middle;text-align:center;">
          <div style="margin-left:316px;width:700px;height:100%;">
              <router-link  to="/" style="float:left;margin:0px 20px;">首页</router-link>
              <div style="width:56px;height:56px;margin:0px 20px;float:left;position:relative;" class="big" >
                <a href="" style="float:left;" class="type"> 商品</a>
                  <router-link to=""  >

                  </router-link>
                  <div style="overflow:hidden;box-shadow: 0px 0px 4px rgba(0,0,0,0.20);font-weight:normal;font-size:12px;" class="top">
                    <!-- <router-link to="#/man">男士</router-link> -->
                    <div style="overflow:hidden;"><a href="#/no2">男士</a></div>
                    <div><a href="#/no3">女士</a></div>
                  </div>
              </div>

              <router-link to="no4" style="float:left;margin:0px 20px;">品牌</router-link>
              <router-link to="no5" style="float:left;margin:0px 20px;">活动</router-link>
          </div>
        </div>
        <div style="width: 194px;line-height:86px;text-align:right;">
          <div class="el-icon-user-solid" style="font-size:22px;margin-right:10px;"></div>
          <div class="el-icon-shopping-cart-2"  style="font-size:22px;"></div>
        </div>
      </div>
    </div>
      <div style="min-height:523px;margin-top:10px;">
        <router-view></router-view>
      </div>
      <div class="footer" style="min-height:256px;padding:0 40px;">
        <div style="border-bottom:1px solid rgba(224,224,224,1);overflow:hidden;padding-bottom:40px;">
          <div style="width:619px;float:left;margin-right:20px;">
              <h5 style="border-bottom:1px solid rgba(224,224,224,1);padding-top: 20px;
    padding-bottom: 10px;margin-bottom: 15px;font-size:15px;color:#000;">客户服务</h5>

              <div style="float:left;width:309px;">
                <p style="
    font-size: 13px;
    font-family: 微軟正黑體;line-height:26px;">

                  活动咨询：400-0000-0000 <br>
                  售后咨询：800-0000-0000 <br>
                  企业邮箱：info@email.com <br>
                </p>
              </div>
              <div  style="float:left;width:309px;font-size: 13px;
    font-family: 微軟正黑體;line-height:26px;">
                寄件说明 <br>
                退货相关 <br>
                修补服务 <br>
              </div>
            </div>
             <div style="width:619px;float:left">
              <h5 style="border-bottom:1px solid rgba(224,224,224,1);padding-top: 20px;
    padding-bottom: 10px;margin-bottom: 15px;font-size:15px;color:#000;">客户服务</h5>

              <div style="float:left;width:309px;">
                <p style="
    font-size: 13px;
    font-family: 微軟正黑體;line-height:26px;">

                  活动咨询：400-0000-0000 <br>
                  售后咨询：800-0000-0000 <br>
                  企业邮箱：info@email.com <br>
                </p>
              </div>
              <div  style="float:left;width:309px;font-size: 13px;
    font-family: 微軟正黑體;line-height:26px;">
                寄件说明 <br>
                退货相关 <br>
                修补服务 <br>
              </div>
            </div>
         </div>
         <div style="padding:30px 0px;">
          <p style="font-family: 微軟正黑體;
    font-size: 13px;
    color: rgb(0, 0, 0);">Copyright  © 2018  休闲运动鞋服肤商城模板  All rights reserved <i><img style="width:63px;float:right;" src="https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS9iYzg4ZmFiY2Y3NDc5ZTVlMGVhMDE2NjA3MGYzZTY3OC02MHgyMy05MC53ZWJw.webp" alt=""></i></p>
         </div>
      </div>


  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      type1:'/index'
    }

  },
  mounted(){
    this.type1 = this.$route.path
  },
  watch: {
    '$route.path'(a,b){
      this.type1 = this.$route.path
      console.log(this.$route.path)
    }
  },
}
</script>

<style>

  .nav{
 padding:10px 0px;

  }
  .nav a{
    font-size:16px;
    position: relative;
    display: inline-block;
    padding:2px 0px 3px;
    min-width: 56px;
    height:51px;
     font-weight: bold;
  }

  .top{
    width: 60px;
    height:80px;
    background: white !important;
    position: absolute;
    top:54px;
    left:0px;
    border:1px solid #ccc;
  display: none;
  }

   .big:hover .top{

     display: block;

   }
   .top>div{
    height:50%;
    line-height: 40px;
  }
  .type>div>div>a{
    display: inline-block;
    height:100% !important;
  }
  .nav a:nth-of-type(2)::after{
    content:'';
    height:0px;
  }
  .top>div>a:hover::after{

    content:'';
    height:0px;
  }
  .top>div>a:hover{
     color: #f67599;
  }

</style>
